<!DOCTYPE html>
<html lang="en">
<head>
  <title>Fall Detection Dashboard</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="http://cmpt165.csil.sfu.ca/js/jquery-3.2.1.js"></script>
  <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

  <script>
function showPage1()
{	$('li').attr('class',"")
	$('#2').attr('class',"active")
	$(".pages").hide();
	$("#graphs").show();
}

function showPage2()
{	$('li').attr('class',"")
	$('#3').attr('class',"active")
	$(".pages").hide();
	$("#MLPage").show();
}
function showPage3()
{	$('li').attr('class',"")
	$('#4').attr('class',"active")
	$(".pages").hide();
	$("#MLStats").show();
	dynamicML();
}
function showPage4()
{
$('li').attr('class',"")
	$('#5').attr('class',"active")
	$(".pages").hide();
	$("#contact").show();
}
function showHome()
{
	$('li').attr('class',"")
	$('#1').attr('class',"active")

	$(".pages").hide();
	$("#homepage").show();
	dynamicHome();
}

setup = function() {
      $('.pages').hide();
	 $('#homepage').show()
	 dynamicHome();
}
jQuery(document).ready(setup)

 function dynamicML () {

var dps = []; // dataPoints
var dps1 =[];
var dps2 =[];
var dps3 = []; // dataPoints
var marginLeft=0;
//var temp = [];
var chart = new CanvasJS.Chart("chartContainer4", {
    title :{
        text: "Variance"
    },
	axisX: {
        
		title: "row"
    }, 
    axisY: {
        
		title: "value"
    },      
    data: [{
        type: "line", lineColor: "red",
        dataPoints: dps
    },{
        type: "line", lineColor: "blue",
        dataPoints: dps1
    },
	{
        type: "line", lineColor: "orange",
        dataPoints: dps2
    }
	]
});
var chart2 = new CanvasJS.Chart("chartContainer5", {
    title :{
        text: "Prediction"
    },
	axisX: {
        
		title: "row"
    }, 
    axisY: {
        
		title: "value"
    },      
    data: [{
        type: "line", lineColor: "red",
        dataPoints: dps3
    }
	]
});


var xVal = 0;
var yVal = 0; 
var yVal1 = 0;
var yVal2 = 0;
var yVal3 = 0;
var updateInterval = 2500;
var myVar=null;
var dataLength = 100; // number of dataPoints visible at any point
var t = 0;
var temp;
	

function updateChart(count) {
	count=count||dataLength;
    for (var j = 0; j < count; j++) {
			if(xVal == 1921){
		clearInterval(myVar);
		break;
		}
		console.log(j+count);
		yVal= + temp[xVal]["var_waistAccelerationX"]
		yVal1= + temp[xVal]["var_waistAccelerationY"]
		yVal2= + temp[xVal]["var_waistAccelerationZ"]
		yVal3= + temp[xVal]["class_label"]
		//yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
		dps.push({
            x: xVal,
            y: yVal
        });
		dps1.push({
		    x: xVal,
            y: yVal1
		});
		dps2.push({
		    x: xVal,
            y: yVal2
		});
		dps3.push({
		    x: xVal,
            y: yVal3
		});
		
        xVal++;
    }

    //if (dps.length > dataLength) {
      //  dps.shift(dataLength);
    //}
    chart.render();
	chart2.render();
};


d3.csv("http://127.0.0.1:8000/Fall15.csv", function(data) {
		temp=data;
		
		updateChart(dataLength);
		
		myVar=setInterval(function(){updateChart()}, updateInterval);
});

}

function dynamicHome () {

var dps = []; // dataPoints
var dps1 =[];
var dps2 =[];
var dps3 = []; // dataPoints
var dps4 =[];
var dps5 =[];
var dps6 = []; // dataPoints
var dps7 =[];
var dps8 =[];
var marginLeft=0;
//var temp = [];
var chart = new CanvasJS.Chart("chartContainer", {
    title :{
        text: "Acceleration"
    },
	axisX: {
        
		title: "row"
    }, 
    axisY: {
        
		title: "value"
    },      
    data: [{
        type: "line", lineColor: "red",
        dataPoints: dps
    },{
        type: "line", lineColor: "blue",
        dataPoints: dps1
    },
	{
        type: "line", lineColor: "orange",
        dataPoints: dps2
    }
	]
});

var chart2 = new CanvasJS.Chart("chartContainer2", {
    title :{
        text: "Angular Velocity"
    },
	axisX: {
        
		title: "row"
    }, 
    axisY: {
        title: "value"
    },      
    data: [{
        type: "line", lineColor: "red",
        dataPoints: dps3
    },{
        type: "line", lineColor: "blue",
        dataPoints: dps4
    },
	{
        type: "line", lineColor: "orange",
        dataPoints: dps5
    }
	]
});

var chart3 = new CanvasJS.Chart("chartContainer3", {
    title :{
        text: "Magnetic Field"
    },
	axisX: {
        
		title: "row"
    }, 
    axisY: {
        title: "value"
    },      
    data: [{
        type: "line", lineColor: "red",
        dataPoints: dps6
    },{
        type: "line", lineColor: "blue",
        dataPoints: dps7
    },
	{
        type: "line", lineColor: "orange",
        dataPoints: dps8
    }
	]
});

var xVal = 0;
var yVal = 0; 
var yVal1 = 0;
var yVal2 = 0;
var yVal3 = 0; 
var yVal4 = 0;
var yVal5 = 0;
var yVal6 = 0; 
var yVal7 = 0;
var yVal8 = 0;
var updateInterval = 1500;
var myVar=null;
var dataLength = 128; // number of dataPoints visible at any point
var t = 0;
var temp;
	

function updateChart(count) {
	count=count||dataLength;
    for (var j = 0; j < count; j++) {
			if(xVal == 1921){
		clearInterval(myVar);
		break;
		}
		console.log(j+count);
		yVal= + temp[xVal]["waist Acceleration X (m/s^2)"]
		yVal1= + temp[xVal]["waist Acceleration Y (m/s^2)"]
		yVal2= + temp[xVal]["waist Acceleration Z (m/s^2)"]
		yVal3= + temp[xVal]["waist Angular Velocity X (rad/s)"]
		yVal4= + temp[xVal]["waist Angular Velocity Y (rad/s)"]
		yVal5= + temp[xVal]["waist Angular Velocity Z (rad/s)"]
		yVal6= + temp[xVal]["waist Magnetic Field X (uT)"]
		yVal7= + temp[xVal]["waist Magnetic Field Y (uT)"]
		yVal8= + temp[xVal]["waist Magnetic Field Z (uT)"]
		//yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
		dps.push({
            x: xVal,
            y: yVal
        });
		dps1.push({
		    x: xVal,
            y: yVal1
		});
		dps2.push({
		    x: xVal,
            y: yVal2
		});
		dps3.push({
		    x: xVal,
            y: yVal3
		});
		dps4.push({
		    x: xVal,
            y: yVal4
		});
		dps5.push({
		    x: xVal,
            y: yVal5
		});
		dps6.push({
		    x: xVal,
            y: yVal6
		});
		dps7.push({
		    x: xVal,
            y: yVal7
		});
		dps8.push({
		    x: xVal,
            y: yVal8
		});
		
        xVal++;
    }

    //if (dps.length > dataLength) {
      //  dps.shift(dataLength);
    //}
    chart.render();
	chart2.render();
	chart3.render();
};


d3.csv("http://127.0.0.1:8000/CS1.csv", function(data) {
		temp=data;
		
		updateChart(dataLength);
		
		myVar=setInterval(function(){updateChart()}, updateInterval);
});

}
</script>
  <style>
    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {height: 550px}
    
    /* Set gray background color and 100% height */
    .sidenav {
      background-color: #f1f1f1;
      height: 100%;
    }
        
    /* On small screens, set height to 'auto' for the grid */
    @media screen and (max-width: 767px) {
      .row.content {height: auto;} 
    }
	h4{
	text-align:center;
	}
	h5{
	text-align:center;
	}
	.pages{
	margin:0px;
	}
	.lower{
	margin-upper:10px
	}
	img
	{
	height:220px;
	}
	.bg-company{
	background-color: #274d8c;
	}
	#graphs img{
	width:250px;
	}
	

  </style>
</head>
<body>

<div class="container-fluid" style="overflow:hiddens" >
  <div class="row content">
    <br>
    
    <div class="col-sm-12">
        <nav class="navbar navbar-default bg-company">
  	<div class="container-fluid">
    	<div class="navbar-header">
      	<a class="navbar-brand" href="#" style="color:white"><b>Fall Detection Dashboard</b></a>
    	</div>
    	<ul class="nav navbar-nav">
      	<li class="active" id='1'><a style="color:white" href="#" onClick="showHome();"><b>Home</b></a></li>
      	<li id='2'><a href="#" onClick="showPage1();" style="color:white"><b>EDA</b></a></li>
      	<li id='3'><a style="color:white" href="#" onClick="showPage2();"><b>Machine Learning</b></a></li>
	<li id='4'><a style="color:white" href="#" onClick="showPage3();"><b>Simulation</b></a></li>
	<li id='5'><a style="color:white" href="#" onClick="showPage4();"><b>Contact</b></a></li>
    	</ul>
  	</div>
	</nav>
	<div class="row pages" id="contact">
		<div class="col-sm-3 well" style="margin-left:40px">
			<h4>Amandeep Singh Kapoor</h4>
			<h5>askapoor@sfu.ca</h5>
		</div> 
		<div class="col-sm-1">
		</div>
		<div class="col-sm-3 well">
			<h4>Inder Preet Singh</h4>
			<h5>isa21@sfu.ca</h5>
		</div> 
		<div class="col-sm-1">
		</div>
		<div class="col-sm-3 well">
			<h4>Prabhjot Singh</h4>
			<h5>psa83@sfu.ca</h5>
		</div> 
	</div>
	<div class="row pages" id="homepage">
		<div class="col-sm-4 well">
			<div id="chartContainer"  style="height: 300px; width:100%">
			</div>
		</div> 
		<div class="col-sm-4 well"> 
			<div id="chartContainer3" style="height: 300px; width:100%">
			</div>
		</div>
		<div class="col-sm-4 well">
			<div id="chartContainer2" style="height: 300px; width:100%">
			</div>
		</div> 
		</div> 
	</div> 
	<div class="row pages" id="MLStats">
	<div class="row">
		<div class="col-sm-1">

		</div> 
		<div class="col-sm-10 well"> 
			<div id="chartContainer4"  style="height: 300px; width:100%">
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-1">
		</div> 
		<div class="col-sm-10 well"> 
			<div id="chartContainer5"  style="height: 300px; width:100%">
			</div>
		</div>
	</div>
	</div> 
	      <div class="row pages" id="graphs">
        <div class="col-sm-3 well" style="margin-left:40px"> 
			<img src="acceleration.png" alt="class image" >
		<h4>Acceleration</h4>
          </div>
		<div class="col-sm-1">
		</div>
        <div class="col-sm-3 well" >
		<img src="magnetic.png" alt="feature selection">
		<h4>Magnetic Field</h4>
          </div>
		<div class="col-sm-1">
		</div>
        <div class="col-sm-3 well">
		<img src="angular_velocity.png" alt="feature selection">
		<h4>Angular Velocity</h4>
        </div>
		<div class="col-sm-3 well" style="margin-left:40px">
		<img src="fall_categories.png" alt="feature selection">
		<h4>Fall Categories</h4>
        </div>
		<div class="col-sm-1">
		</div>
		<div class="col-sm-3 well">
		<img src="Near_Fall.png" alt="feature selection">
		<h4>Near Fall Categories</h4>
        </div>
		<div class="col-sm-1">
		</div>
		<div class="col-sm-3 well">
		<img src="ADL.png" alt="feature selection">
		<h4>ADL Categories</h4>
        </div>
	</div>
		<div class="row pages" id="MLPage">
        <div class="col-sm-3 well" style="margin-left:40px;"> 
		<img src="logistic.png" alt="class image" >
		<h4>Logistic Regression</h4>
          </div>
		 <div class="col-sm-1"> </div>
        <div class="col-sm-3 well" >
		<img src="GNB.png" alt="feature selection">
		<h4>Gaussian Naive Bayes</h4>
        </div>
		<div class="col-sm-1"> </div>
        <div class="col-sm-3 well">
		<img src="GBT.png" alt="feature selection">
		<h4>Gradient Boosting Classifier</h4>
        </div>
	<div class="col-sm-3 well" style="margin-left:40px;">

		<img src="DTree.png" alt="feature selection">
		<h4>Decision Tree</h4>
        </div>
	<div class="col-sm-1"> </div>
	<div class="col-sm-3 well">

		<img src="adaboost.png" alt="feature selection">
		<h4>Adaboost Classifier</h4>
        </div>
	<div class="col-sm-1"> </div>
	<div class="col-sm-3 well">

		<img src="RF.png" alt="feature selection">
		<h4>Random Forest</h4>
        </div>
	</div>
	</div> 
	
	


     
    </div>
  </div>
</div>

</body>
</html>
